<template>
	<view class="container">
		<view class="select-box flex f-align">
			<view class="f-center grow" @click="topHandle">
				<text class="font24 white bold">{{
					dataForm.payWay == '全部' ? '全部' : dataForm.payWay + '支付'
				}}</text>
				<text class="icon-right zlicon font24 white ml20"></text>
			</view>
			<view class="right-box f-center" @click="$refs.popup.show()">
				<text class="font24 white mr10">筛选</text>
				<image
					src="../static/img/sdasdasdasd.png"
					style="width: 18rpx; height: 22rpx"
				></image>
			</view>
		</view>
		<view class="flex f-column box-way" v-show="topAni" @click="topAni = false">
			<view class="box-inner flex f-column">
				<view
					@click.stop="
						() => {
							;(dataForm.payWay = item), (topAni = false), getGoodsList()
						}
					"
					class="flex f-align f-justifyB box-item"
					v-for="(item, index) in ['全部', '微信', '余额']"
					:key="index"
				>
					<text
						class="font26 gray777"
						:class="{ font: dataForm.payWay == item }"
						>{{ item == '全部' ? item : item + '支付' }}</text
					>
					<image
						src="/static/img/dui2.png"
						style="width: 27rpx"
						mode="widthFix"
						v-if="dataForm.payWay == item"
					></image>
				</view>
			</view>
		</view>
		<view style="width: 100%; height: 83rpx"></view>
		<view v-if="isfetch">
			<view class="flex f-column" v-if="goodsList.length > 0">
				<view
					class="order-item flex f-justifyB"
					v-for="(item, index) in goodsList"
					:key="index"
				>
					<view class="flex">
						<image
							v-if="item.payWay == '余额'"
							src="../static/img/yuepay.png"
							style="width: 54rpx; margin-right: 30rpx"
							mode="widthFix"
						></image>
						<image
							v-else-if="item.payWay == '微信'"
							src="../static/img/vxpay.png"
							style="width: 54rpx; margin-right: 30rpx"
							mode="widthFix"
						></image>
						<view class="flex f-column">
							<text class="font28 black">订单号：{{ item.orderNumber }}</text>
							<text class="font24 mt20 gray333">{{ item.expenseType }}</text>
							<text class="font24 mt20 gray333">{{ item.expenseTime }}</text>
						</view>
					</view>
					<view class="flex f-column" style="align-items: flex-end">
						<text class="font36 black bold">{{ item.expenseSum }}</text>
						<text class="font24 gray333 mt20">{{ item.payWay }}支付</text>
						<text class="font24 gray333 mt20"
							>余额 {{ item.balanceEnd || '-' }}</text
						>
					</view>
				</view>
				<uni-load-more ref="loadMore" :status="loadStatus"></uni-load-more>
			</view>
			<view class="flex f-column f-align" v-else>
				<text class="nohas-font">暂无订单</text>
			</view>
		</view>

		<wyb-popup
			ref="popup"
			type="right"
			height="400"
			width="578"
			radius="6"
			:showCloseIcon="true"
			:maskClickClose="false"
		>
			<view class="flex f-column s-gzbh">
				<text class="font28 gray333 bold" style="margin-bottom: 50rpx"
					>筛选</text
				>
				<view class="flex f-column s-box">
					<text class="font24 bold black">订单编号</text>
					<input
						type="number"
						v-model="dataForm.orderNumber"
						placeholder="请输入订单编号"
						class="number-input"
						maxlength="30"
					/>
				</view>
				<view class="flex f-column s-box">
					<text class="font24 bold black">金额区间（元）</text>
					<view class="flex f-align mt30">
						<input
							@input="inputHandle($event, 1)"
							type="digit"
							v-model="dataForm.moneyStart"
							placeholder="最低金额"
							class="gz-box"
							maxlength="7"
						/>
						-
						<input
							@input="inputHandle($event, 2)"
							type="digit"
							v-model="dataForm.moneyEnd"
							placeholder="最高金额"
							class="gz-box"
							maxlength="7"
						/>
					</view>
				</view>
				<view class="flex f-column s-box">
					<text class="font24 bold black">时间段</text>
					<view class="flex f-align mt30">
						<picker mode="date" @change="getTime($event, 1)">
							<view class="gz-box">{{
								!dataForm.start ? '开始日期' : dataForm.start
							}}</view>
						</picker>
						-
						<picker mode="date" @change="getTime($event, 2)">
							<view class="gz-box">{{
								!dataForm.end ? '结束日期' : dataForm.end
							}}</view>
						</picker>
					</view>
				</view>
				<view class="flex f-column s-box">
					<text class="font24 bold black">支付方式</text>
					<view class="flex f-align mt30">
						<view
							@click="dataForm.payWay = item"
							class="gz-box"
							v-for="(item, index) in ['全部', '微信', '余额']"
							:key="index"
						>
							{{ item == '全部' ? item : item + '支付' }}
							<image
								src="/static/img/dui.png"
								class="img-dui"
								v-if="dataForm.payWay == item"
							></image>
						</view>
					</view>
				</view>
				<view class="s-btn-g flex f-justifyB">
					<view
						class="s-btn f-center"
						style="background: #f00"
						@click="resetHandle"
					>
						重 置
					</view>
					<view class="s-btn f-center" @click="confirmHandle"> 确 认 </view>
				</view>
			</view>
		</wyb-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import loadMore from '@/components/uni-load-more/uni-load-more.vue'
import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
import { checkInput } from '@/utils/common.js'
export default {
	data() {
		return {
			page: 1,
			loadStatus: 'more',
			isfetch: false,
			goodsList: [],
			gzbh: '',
			address: '',

			dataForm: {
				orderNumber: '',
				moneyStart: '',
				moneyEnd: '',
				start: '',
				end: '',
				payWay: '全部'
			},
			topAni: false
		}
	},
	computed: {
		...mapState(['userInfo'])
	},
	components: {
		loadMore,
		wybPopup
	},
	onLoad() {
		this.getGoodsList()
	},
	onPullDownRefresh() {
		this.page = 1
		this.loadStatus = 'more'
		this.getGoodsList()
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1000)
	},
	onReachBottom() {
		if (this.loadStatus != 'noMore') {
			this.loadStatus = 'loading'
			this.page += 1
			this.getGoodsList()
		}
	},
	methods: {
		resetHandle() {
			this.page = 1
			this.loadStatus = 'more'
			this.dataForm.orderNumber = ''
			this.dataForm.moneyStart = ''
			this.dataForm.moneyEnd = ''
			this.dataForm.start = ''
			this.dataForm.end = ''
			this.dataForm.payWay = '全部'
			this.getGoodsList()
		},
		topHandle() {
			this.topAni = true
		},
		inputHandle(event, type) {
			this.$nextTick(() => {
				if (type == 1) {
					this.dataForm.moneyStart = checkInput(event.detail.value)
				} else {
					this.dataForm.moneyEnd = checkInput(event.detail.value)
				}
			})
		},
		getTime(event, type) {
			if (type == 1) {
				this.dataForm.start = event.detail.value
			} else {
				this.dataForm.end = event.detail.value
			}
		},
		confirmHandle() {
			this.page = 1
			this.loadStatus = 'more'
			this.getGoodsList()
			this.$refs.popup.hide()
		},
		getGoodsList() {
			this.goodsList = []
			this.$http
				.ajax({
					url: '/ExpenseLog/list',
					params: {
						page: this.page,
						limit: 10,
						userId: this.userInfo.id,
						orderNumber: this.dataForm.orderNumber,
						moneyStart: this.dataForm.moneyStart,
						moneyEnd: this.dataForm.moneyEnd,
						start: this.dataForm.start,
						end: this.dataForm.end,
						payWay: this.dataForm.payWay == '全部' ? '' : this.dataForm.payWay
					}
				})
				.then((res) => {
					this.isfetch = true
					if (res.code == 200) {
						if (res.data.length < 10) {
							this.loadStatus = 'noMore'
						}
						if (this.page > 1) {
							this.goodsList = this.goodsList.concat(res.data)
						} else {
							this.goodsList = res.data
						}
					} else {
						this.goodsList = []
						this.loadStatus = 'noMore'
						this.$api.msg(res.msg)
					}
				})
		}
	}
}
</script>

<style scoped lang="scss">
.s-gzbh {
	width: 578rpx;
	height: 100%;
	position: relative;
	padding: 40rpx 30rpx 150rpx;

	.s-box {
		margin-bottom: 73rpx;
	}

	.number-input {
		width: 90%;
		height: 72rpx;
		background: #f2f2f2;
		border-radius: 36rpx;
		padding-left: 36rpx;
		font-size: 26rpx;
		color: #000000;
		margin: 30rpx 20rpx 0;
	}
}

.gz-box {
	width: 208rpx;
	height: 60rpx;
	background: #ffffff;
	border: 2rpx solid #e8e8e8;
	border-radius: 7rpx;
	font-size: 25rpx;
	color: #808080;
	margin: 0 20rpx;
	position: relative;
	line-height: 56rpx;
	text-align: center;
}

.gz-active {
	border-color: #4082fd;
	color: #4082fd;
}

.img-dui {
	width: 30rpx;
	height: 30rpx;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 10;
}

.s-btn-g {
	position: absolute;
	bottom: 50rpx;
	left: 39rpx;
	z-index: 99;
	width: 520rpx;
}

.s-btn {
	width: 240rpx;
	height: 87rpx;
	background: #4082fd;
	border-radius: 13rpx;
	font-size: 31rpx;
	color: #ffffff;
}

.select-box {
	width: 750rpx;
	height: 83rpx;
	background: #4082fd;
	position: fixed;
	top: 0;
	z-index: 99;

	.right-box {
		width: 185rpx;
		height: 36rpx;
		border-left: 1rpx solid #7fa2e5;
	}
}

.box-way {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 59;
	background-color: rgba(0, 0, 0, 0.5);
	padding-top: 83rpx;

	.box-inner {
		width: 100%;
		height: 280rpx;
		background-color: #ffffff;
		padding: 15rpx 50rpx;
		transition: all 0.5s;
	}

	.box-item {
		margin: 24rpx 0;

		.font {
			color: #000000;
			font-weight: 800;
		}
	}
}

.order-item {
	width: 750rpx;
	background-color: #ffffff;
	padding: 26rpx 30rpx 38rpx;
}

.container {
	padding: 0;
}
</style>
